<script setup>
// import { ref, onMounted } from 'vue'
// import { useRouter } from 'vue-router';
import { arrowMiddleware } from "element-plus";
import { mainStore } from "../../store";
import '../../views/home/nav.css'
const router = useRouter();
// const router = useRouter();
  // Document,
  // Menu as IconMenu,
 import {
 Location,
  // Setting,
} from '@element-plus/icons-vue'

let items = ref([])
let Arr = []
onMounted(() => {
  
let res = mainStore().getNav()
console.log("navmenures",res)
items.value = res
})

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
 Arr = items.value[key]['children']
  console.log("openArr",Arr)

}
const handleSelect = (route,index, indexPath,item) => {

console.log("route",route)
// console.log("indexPath",indexPath)
// console.log("item",item)

// let id = findId(index)

// console.log("id",id)

  // router.push({path: route,params:id})
//  console.log("router",router)
//  router.replace(route);
  router.push(route);
}
const findId = (index)=>{
  console.log("findIdindex",index)
  let item  =  items.value[index[0]]['children']
  let id = item.find((ite) => {
  return ite.component == index[1]
}


)
return id

 
}
</script>

<template>
  <el-aside width="200px">
    <!-- <el-menu default-active="2" class="el-menu-vertical-demo" active-text-color="#ffd04b" background-color="#545c64"
      text-color="#fff" > -->
      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @select="handleSelect" vue-router>
      <el-sub-menu v-for="(item, index) in items" :key="index" :index="index" >
        <template #title>
          <el-icon>
            <location />
          </el-icon>
          <span>{{index}}</span>
        </template>
        <el-menu-item v-for="child in item.children"   :index="child.path">{{child.name}}</el-menu-item>
        <!-- <el-menu-item index="1-2">报表</el-menu-item>
        <el-menu-item index="1-3">检疫</el-menu-item> -->
      </el-sub-menu>
      
    </el-menu>
  </el-aside>
</template>
